<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{$store.state.abc.count}}</h2>
    <!-- count 点击加减,并不会改变这个组件,但是这个组件,能取到最初始的值 -->
    <h2>===={{count}}----</h2>
    <button @click="add">+</button>
    <button @click='addFn'>++</button>
    <button @click='addFnnn'>+++++</button>
  </div>
</template>

<script>

// import store from '@/vuex/store'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

export default {
  name: 'HelloWorld123',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:{
    ...mapState('abc',['count']),
  },
  methods:{
    ...mapMutations('abc',['add','reduce']),

    addFn(){
      this.$store.commit('abc/add') //格式：模块名/模块中的mutations
    },
    addFnnn() { 
      this.$store.dispatch('abc/addAction') //格式：模块名/模块中的actions
    }
  },
  // store  //引入进来,记得在这里使用, 如果main.js引入了,其他页面就不需要再单独引入了，直接使用


  /**
   * 相关链接
   * http://www.imooc.com/wenda/detail/571997
   * 
   * 
   * https://blog.csdn.net/fuck487/article/details/83411856
   * 
   * 
   * */ 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
